<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>标注工具</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    </head>

    <body>

        <div class="image-container">
            <img id="myImage" src="" alt="可标注图片" draggable="false">
            <!-- <img id="myImage" src="exrample.jpg" alt="可标注图片" draggable="false"> -->
        </div>

        <div id="settings-panel">
            <div class="drag-handle"></div>
            <div class="settings-content">
                <div class="set">设置</div>
                <div class="setting-item">
                    <label for="moveStep">键盘移动步长 (%):</label>
                    <input type="number" id="moveStep" step="0.1" value="0.5">
                </div>
                <div class="setting-item">
                    <label for="zIndex">层级 (Z-index):</label>
                    <input type="number" id="zIndex" value="10" min="1" max="9999">
                    <button id="setAllZIndexBtn" class="btn btn-secondary">设置所有</button>
                </div>
                <div class="setting-item">
                    <label for="fontSizeRatio">文字大小比例:</label>
                    <input type="number" id="fontSizeRatio" step="0.001" value="0.025">
                    <button id="setAllFontSizeBtn" class="btn btn-secondary">设置所有</button>
                </div>
                <div class="setting-item">
                    <label for="paddingYRatio">内边距-上下:</label>
                    <input type="number" id="paddingYRatio" min="0" max="0.1" step="0.001" value="0.004">
                    <button id="setAllPaddingYBtn" class="btn btn-secondary">设置所有</button>
                </div>
                <div class="setting-item">
                    <label for="paddingXRatio">内边距-左右:</label>
                    <input type="number" id="paddingXRatio" min="0" max="0.1" step="0.001" value="0.004">
                    <button id="setAllPaddingXBtn" class="btn btn-secondary">设置所有</button>
                </div>

                <div class="setting-item">
                    <label for="borderRadius">圆角 (px):</label>
                    <div class="color-input-group">
                        <input type="number" id="borderRadius" min="0" max="100" step="1" value="5">
                    </div>
                    <button id="setAllBorderRadiusBtn" class="btn btn-secondary">全部应用</button>
                </div>

                <div class="setting-item">
                    <label for="fontColor">文字颜色:</label>
                    <div class="color-input-group">
                        <input type="color" id="fontColor" value="#ffffff">
                        <input type="number" id="fontAlpha" min="0" max="1" step="0.01" value="1">
                    </div>
                    <button id="setAllFontColorBtn" class="btn btn-secondary">设置所有</button>
                </div>
                <div class="setting-item">
                    <label for="bgColor">文本框底色:</label>
                    <div class="color-input-group">
                        <input type="color" id="bgColor" value="transparent">
                        <input type="number" id="bgAlpha" min="0" max="1" step="0.01" value="1">
                    </div>
                    <button id="setAllBgColorBtn" class="btn btn-secondary">设置所有</button>
                </div>

                <!-- <div class="settings-actions"> -->
                <div class="setting-item">
                    <input type="text" id="imagePrefixPathInput" placeholder="例如: https://example.com/images/">
                    <!-- <div> <label>图片原始路径</label> </div> -->
                    <input type="text" id="originalImagePathDisplay" readonly>
                </div>
                <!-- <button id="parseHtmlBtn" class="btn">解析文本</button> -->
                <!-- </div> -->

                <div class="settings-actions">
                    <button id="uploadBtn" class="btn">上传图片</button>
                    <textarea id="htmlContentInput" class="form-control" placeholder="粘贴要解析的HTML内容"></textarea>
                    <!-- <button id="parseHtmlBtn" class="btn">解析文本</button> -->
                </div>



                <div class="settings-actions">
                    <button id="saveBtn" class="btn">保存图片</button>
                    <input type="file" id="imageInput" accept="image/*" style="display: none;">
                    <button id="copyHtmlBtn" class="btn">复制内容</button>
                    <button id="copyCustomHtmlBtn" class="btn">复制自定路径图片内容</button>
                </div>
                <div class="settings-actions">
                    <button id="clearTextBtn" class="btn">清除文本</button>
                </div>


            </div>
        </div>

        <div id="custom-alert" class="custom-alert">
            <div class="alert-content">
                <span class="alert-message"></span>
            </div>
        </div>


        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
        <script src="script.js"></script>

    </body>

</html>